<template>
  <div class="page-view">
    <van-tabs
      v-model="activeTab"
      title-active-color="#333333"
      color="#04CABC"
      :ellipsis="false"
      @change="onTabChange"
    >
      <van-tab title="模拟考试" />
      <van-tab title="历年真题" />
      <div
        v-show="loading"
        class="loading-mask"
      />
    </van-tabs>
    <div v-if="paperList.length > 0">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="— 没有更多了 —"
        @load="getPaperList"
      >
        <ExamPaperEntry
          v-for="test in paperList"
          :key="test.Id"
          :paper="test"
          :paper-type="String(activeTab + 1)"
        />
      </van-list>
    </div>
    <NoData
      v-else-if="paperList.length === 0 && fatchFinished"
      class="mgt300"
    >
      暂无相关考试
    </NoData>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    ExamPaperEntry: () => import(/* webpackChunkName: "testIndexComp" */
      'components/Exam/Index/ExamPaperEntry.vue'),
    NoData: () => import('components/Class/NoData.vue'),
  },
  data () {
    return {
      paperList: [],
      loading: false,
      activeTab: 0,
      finished: false,
      fatchFinished: false,
      pageIndex: 1,
      pageSize: 10,
    }
  },
  created () {
    this.getPaperList()
  },
  methods: {
    onTabChange (index: number) {
      this.pageIndex = 1
      this.paperList = []
      this.getPaperList()
    },
    getPaperList () {
      this.fatchFinished = false
      this.$axios({
        url: 'ytjysite/TPaper/GetModelList',
        data: {
          PageIndex: this.pageIndex,
          pageSize: this.pageSize,
          type: this.activeTab + 1,
        },
      }).then(res => {
        this.$set(this.$data, 'paperList',
          [...this.paperList, ...res.Items])
        this.loading = false
        this.fatchFinished = true

        if (this.pageIndex * this.pageSize >= res.TotalCount) {
          this.finished = true
        } else {
          this.pageIndex++
        }
      })
    },
  },
})
</script>

<style lang="scss" scoped>
.my-list-wrapper {
  /deep/ {
    .van-collapse-item__content {
      min-height: 100px;
      max-height: 70vh;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}
// .exam-list {
//   padding-left: 67px;
// }
.no-data-list {
  padding-left: 0;
}
.mgt300 {
  margin-top: 300px;
}
.page-view {
  background: #fff;
  min-height: 100%;
  /deep/ {
    .van-collapse-item__content {
      padding: 0;
      line-height: 1.1;
    }
  }
}
.icon {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.exam-type-name {
  vertical-align: middle;
  line-height: 1;
}
.loading-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
}
</style>
